<template>
  <div class="role">
    <div class="search">
      <HyForm
        :form-items="formItems"
        :label-width="labelWidth"
        v-model="formData"
      >
        <!-- 插槽 -->
        <template #header>
          <h1 class="header">仓库检索</h1>
        </template>
        <template #footer>
          <div class="handle-btns">
            <el-button
              ><el-icon><Filter /></el-icon>重置</el-button
            >
            <el-button type="primary"
              ><el-icon><ZoomOut /></el-icon>搜索</el-button
            >
          </div>
        </template>
      </HyForm>
    </div>
    <div class="content">
      <PageContent
        ref="pageContentRef"
        :contentTableConfig="contentTableConfig"
        @resetBtnClick="handleResetClick"
        @queryBtnClick="handleQueryClick"
        @editBtnClick="handleEditData"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref } from "vue";
import HyForm, { IFormItem } from "@/base-ui/form";
import PageContent from "@/components/page-content";
import { contentTableConfig } from "./config/content.config";
import PageModal from "@/components/page-modal";
import store from "@/store";
import { usePageSearch } from "@/hooks/use-page-search";
import { usePageModel } from "@/hooks/use-page-modal";
export default defineComponent({
  name: "role",
  components: {
    HyForm,
    PageContent
  },
  setup() {
    const pageModalRef = ref<InstanceType<typeof PageModal>>();
    const formOriginData: any = {};
    // 优化一
    // 重置按钮
    // const handleResetClick = () => {
    //   formData.value = formOriginData;
    // }
    // 搜索按钮
    const formData = reactive({
      name: "",
      password: "",
      sport: ""
    });

    const formItems: IFormItem[] = [
      {
        field: "id",
        type: "input",
        label: "订单id",
        rules: [],
        placeholder: "请输入订单id"
      },
      {
        field: "input",
        type: "input",
        label: "城市",
        rules: [],
        placeholder: "请输入城市"
      },
      {
        field: "sport",
        type: "select",
        label: "入库状态",
        rules: [],
        placeholder: "请输入入库状态",
        options: [
          { title: "入库", value: "入库" },
          { title: "未入库", value: "未入库" }
          // { title: "排球", value: "basketball" }
        ]
      }
    ];
    const labelWidth = "70px";
    // const orderList = computed(() => store.state.product.userList);
    const [handleResetClick, handleQueryClick, pageContentRef] =
      usePageSearch();
    const [defaultInfo, pageModelRef, handleEditData] = usePageModel();
    return {
      formItems,
      labelWidth,
      formData,
      contentTableConfig,
      // orderList,
      handleResetClick,
      handleQueryClick,
      pageContentRef,
      handleEditData,
      pageModalRef,
      defaultInfo,
      pageModelRef
    };
  }
});
</script>

<style scoped lang="less">
.role {
  .content {
    background-color: #fff;
    border-radius: 10px;
  }
  .search {
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 10px;
    .header {
      text-align: left;
      margin: 0px 0px;
    }
    .handle-btns {
      text-align: end;
    }
  }
}
</style>
